<script setup lang="ts" name="TodoListItem">
import { PropType, ref } from 'vue'
import { useTodoStore } from '../Storage'

const props = defineProps({
  todo: {
    type: Object as PropType<Todo>,
    required: true,
  },
})

const store = useTodoStore()

const todo = props.todo
const currentEdit = ref(null as null | Todo)

const handleTodoTextClick = (e: MouseEvent) => {
  currentEdit.value = todo
  // Set element to focus
  setTimeout(() => (e.target as HTMLElement).focus(), 0)
}

const handleTodoTextKeyDown = (e: KeyboardEvent) => {
  if (e.key == 'Enter' || e.key == 'Escape') {
    // Remove focus
    ; (e.target as HTMLElement).blur()
    currentEdit.value = null
    e.preventDefault()
  }
}

const handleTodoTextFocusout = (e: FocusEvent) => {
  currentEdit.value = null
  todo.text = (e.target as HTMLElement).innerText
}
</script>

<template>
  <li class="todo-item">
    <input v-model="todo.done" type="checkbox" class="toggle" />
    <div :class="todo.done ? 'view done' : 'view'">
      <span class="todo-text" :onClick="handleTodoTextClick" :onKeydown="handleTodoTextKeyDown"
        :onFocusout="handleTodoTextFocusout" :contenteditable="currentEdit==todo">
        {{todo.text}}
      </span>
    </div>
    <span :onClick="()=> store.removeTodo(todo)" class="destroy">
      &times;
    </span>
  </li>
</template>
